<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"><meta name="referrer" content="no-referrer" />
  <title>图片详情界面</title>
  <script src="js/jquery-1.11.0.min.js"></script>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/materialdesignicons.min.css" rel="stylesheet">
  <link href="css/style.min.css" rel="stylesheet">
  <style>
    .left-side {
      position: fixed;
      top: 0;
      bottom: 0;
      z-index: 5;
      display: block;
      width: 240px;
      font-weight: 500;
    }
    .card{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 700px;
      border-radius: 5px;
    }
    .submenu >ul{
      display: none;
    }
    .open>ul{
      display: block;
    }
    .button {
      border-color: cornsilk;
      background-color: rgba(65, 192, 170, .7);
      color: aliceblue;
      border-style: hidden;
      border-radius: 5px;
      width: 100px;
      height: 31px;
      font-size: 16px;
    }
  </style>
  <script>
    $(function () {
      console.log("进入头部");
      $(".header").load("headHtml");
      var picId = window.sessionStorage.getItem("picId");
      $.ajax({
        url: "/getPictureDetail",
        type: "POST",
        data: JSON.stringify({"picId": picId}),
        contentType: "application/json",
        dataType: "json",
        success: function (result) {
          console.log("---------");
          console.log(result);
          console.log("---------");
          $card = $(".card");
          var li = '';
          if (result != null) {
            li = li + '<div><a href="' + result.justImgUrl + '"><img src="' + result.justImgUrl + '" style="max-width:100%;max-height:100%;width:auto;height:auto;"></a></div>';
            li = li + '<div><p style="font-size: larger">图片来源</p></br>' + result.description + '</br>';
            if (result.url!=null){
              li = li + '<a href="' + result.url + '">' + result.url + '</a></br>';
            }else {
              li = li + '链接来源似乎失效！</br>';
            }
            li = li + '<button onclick="deleteFav(' + result.id + ')">取消收藏</button><button onclick="download(' + result.id + ')">下载</button>';
            li = li + '<button onclick="addToDisplay(' + result.id + ')">添加展览</button></div>';
          }
            $card.html(li);
        }
      });
    });
    function deleteFav(a){
      $.ajax({
        url: "/deleteFav",
        type: "POST",
        data: JSON.stringify({"id": a}),
        contentType: "application/json",
        dataType: "json",
        success: function (result) {
          if (result===1){
            confirm("取消成功！");
            window.location.href = "displayHtml";
          }
        }
      });
    }
    function addToDisplay(a){
      window.sessionStorage.setItem("pyqId",a);
      window.location.href = "toAddPyq";
    }
    function download(a){
      $.ajax({
        url: "/download",
        type: "POST",
        data: JSON.stringify({"id": a}),
        contentType: "application/json",
        dataType: "json",
        success: function (result) {
          if (result===1){
            alert("下载成功！");
          }else {
            alert("下载失败！请稍后重试！");
          }
        }
      });
    }
  </script>
  <script>
    $(function () {
      $('.submenu').mouseover(function(){
        $(this).addClass('open');
      }).mouseout(function(){
        $(this).removeClass('open');
      });
    })
  </script>
</head>
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">
      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <h1 style="text-align: center;color: #33cabb;">Spider</h1>
      </div>
      <div class="lyear-layout-sidebar-scroll">
        <nav class="sidebar-main">
          <ul class="nav nav-drawer" style="list-style: none">
            <li class="nav-item active"><a href="/notice"><i class="mdi mdi-home"></i>公告栏</a></li>
            <li class="nav-item active"><a href="/index"><i class="mdi mdi-home"></i>爬取图片</a></li>
            <li class="nav-item active"><a href="/displayHtml"><i class="mdi mdi-home"></i>我的收藏</a></li>
            <li class="nav-item active"><a href="/share"><i class="mdi mdi-home"></i>好图分享</a></li>
            <li class="nav-item active submenu"><a href="#"><i class="mdi mdi-home"></i>个人中心</a>
              <ul class="nav nav-drawer">
                <li class="nav-item active"><a href="/self">&nbsp&nbsp&nbsp&nbsp<i class="mdi mdi-step-forward"></i>信息编辑</a></li>
                <li class="nav-item active"><a href="/record">&nbsp&nbsp&nbsp&nbsp<i class="mdi mdi-step-forward"></i>爬取记录</a></li>
                <li class="nav-item active"><a href="/comment">&nbsp&nbsp&nbsp&nbsp<i class="mdi mdi-step-forward"></i>评论反馈</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </aside>
    <!--End 左侧导航-->
    <!--头部信息-->
    <div class="header"></div>
    <!--End 头部信息-->
    <!-- 主题内容 -->
    <!--页面主要内容 table table-striped table-hover-->
    <main class="lyear-layout-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
            <div class="card">

            </div>
          </div>
        </div>
      </div>
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
</body>
</html>